<!DOCTYPE html>
<html lang="en">
<head>
  
<meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title></title>
  <meta name="viewport" content="initial-scale=1, maximum-scale=1">
  <!-- <link rel="shortcut icon" href="http://favicon.ico"> -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="viewport" content="width=device-width, height=device-height, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">


  <link rel="stylesheet" href="https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/css/sm.min.css">
  <link rel="stylesheet" href="https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/css/sm-extend.min.css">
  <script type="text/javascript" src="https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/common/common/common.js"></script>
  <style>
    /*修改标题栏颜色*/
    .bar.bar-nav {
      background-color: #1FCA23;
    }

    /*修改标题栏字体颜色*/
    .bar.bar-nav .title {
      color: #fff;
    }
    
    /*修改工具栏背景颜色*/
    .bar.bar-tab {
      background-color: #FEEA4D;
    }
    #pull-left{
      display:inline-block;
      width: 1.5rem;
      padding-top:0.3rem;
      float: left;
    }
    #pull-left img{
      display: block;
      width: 100%;
    }
    #pull-title{
      display: inline-block;
      width: 8.0rem;
      height: 2.2rem;
      line-height: 2.2rem;
      /* float: left; */
      margin-left: 30%;
      color: #fff;
      font-size: 16px;
      margin-left: calc(50% - 4rem - 1.5rem);
      text-align: center;
    }
 
    /*主题颜色*/
    .themecolor{
      background-color: #1FCA23;
    }
    /*修改内容区背景色*/
    body{
      background-color:#eeeeee;
    }
    .list-block{
       margin: 0.5rem 0;
    }
    .list-block .item-inner{
      padding: 0.3rem 0;
      -webkit-justify-content:flex-start;
      justify-content:flex-start;
    }
    .item-title{
      width: 62%;
      font-size: 16px;
      text-align: right;
    }
    #school-title{
      width: 75%;
    }
    .item-msg{
      width:25%;
      margin-left:1%;
      color: gray;
      font-size: 14px;
    }
    #school-msg{
      width: 12%;
    }
    .item-icon{
      width: 2.0rem;
      height: 2.0rem;
    
    }
    .item-icon img{
      display: block;
      width: 100%;
    }
    #exitbtn{
      display: block;
      width: 90%;
      height:2.0rem;
      line-height: 2.0rem;
      text-align: center;
      border-radius:3px;
      color:#fff;
      font-size: 16px;
      border:0;
      float: left;
      margin:8% 5% 5% 5%;
    }
    /*点击学校显示的弹框*/
    #showschool{
      width: 100%;
      height:100%;
      position: fixed;
      top:0;
      left: 0;
      background-color: #ededee;
      z-index: 900;
      display: none;
    }
    .searchbar{
      width: 98%;
      margin-left:1%;
    }
    #schoolall{
      width: 100%;
      height: auto;
      padding:0.2rem 0.3rem;
    }
    #schoolall ul li{
      width: 100%;
      height: 1.5rem;
      font-size: 16px;
    }

  </style>
</head>
<body>
  
  <div class="page-group">
    <div class="page">
      <!-- 标题栏 -->
      <header class="bar bar-nav">
         <a href="#" id="pull-left" onclick="backclick()"><img src="https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/img/img/back@2x.png"></a>
         <span id="pull-title">个人资料</span>
      </header>

      <!-- 点击学校显示出的弹框 -->
         <div id="showschool">
                    <!-- 主题内容部分 必须要放在content 的外部-->
               <div class="content infinite-scroll infinite-scroll-bottom" data-distance="100" style="background-color: white">
                   <div class="list-block" >
                    <div class="searchbar">
                         <a class="searchbar-cancel" style="color:black;font-size: 14px;">取消</a>
                         <div class="search-input">
                           <input type="search" id='search' placeholder='输入学校名称...'>
                         </div>
                     </div>

                       <ul class="list-container" id="li_block">

                      </ul>
                   </div>
                   <!-- 加载提示符 -->
                   <div class="infinite-scroll-preloader">
                       <div class="preloader"></div>
                   </div>
               </div>
         </div>

      <!-- 页面内容区域 -->
      <div class="content">
        <!-- <div class="content-block-title">版本号：V1.1.0</div> -->
        <div class="list-block">
          <ul id="childdesc">
            <!-- <li>
              <div class="item-content">  
                 <div class="item-inner" onclick="modify_names()">
                      <span class="item-msg">姓名</span>
                      <div class="item-title">Tony</div>
                      <div class="item-icon">
                         <img src="https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/img/img/img_more_right.png">
                      </div>
                 </div>
              </div>
            </li>
            <li>
              <div class="item-content">  
                 <div class="item-inner">
                      <span class="item-msg">学校</span>
                      <div class="item-title">北京四中中心小学</div>
                      <div class="item-icon">
                         <img src="https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/img/img/img_more_right.png">
                      </div>
                 </div>
              </div>
            </li>
            <li>
              <div class="item-content">  
                 <div class="item-inner">
                      <span class="item-msg">年级</span>
                      <div class="item-title">三年级</div>
                      <div class="item-icon">
                         <img src="https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/img/img/img_more_right.png">
                      </div>
                 </div>
              </div>
            </li>
            <li>
              <div class="item-content">  
                 <div class="item-inner">
                      <span class="item-msg">班级</span>
                      <div class="item-title">二班</div>
                      <div class="item-icon">
                         <img src="https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/img/img/img_more_right.png">
                      </div>
                 </div>
              </div>
            </li>
            <li>
              <div class="item-content">  
                 <div class="item-inner">
                      <span class="item-msg">学号</span>
                      <div class="item-title">2018062012</div>
                      <div class="item-icon">
                         <img src="https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/img/img/img_more_right.png">
                      </div>
                 </div>
              </div>
            </li>
            <li>
              <div class="item-content">  
                 <div class="item-inner" onclick="newphone()">
                      <span class="item-msg">修改手机号</span>
                      <div class="item-title">13811102323</div>
                      <div class="item-icon">
                         <img src="https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/img/img/img_more_right.png">
                      </div>
                 </div>
              </div>
            </li>
            <li>
              <div class="item-content">  
                 <div class="item-inner" onclick="change_password()">
                      <span class="item-msg">修改密码</span>
                      <div class="item-title">*******</div>
                      <div class="item-icon">
                         <img src="https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/img/img/img_more_right.png">
                      </div>
                 </div>
              </div>
            </li> -->

          </ul>
        </div>
        <!-- 退出登录按钮 -->
        <a href="#" id="exitbtn" class="themecolor" onclick="clklogout()">退出登录</a>
      </div>
    </div>
  </div>

  <!-- !-- 固定的js引用，所有的jQuery 要用 $$ 表示 --> 
<script type="text/javascript" src="https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/js/js/jquery-1.11.1.min.js"></script>
<!-- 这一行代码是为了 避免js冲突 -->
<script type="text/javascript">var $$ =jQuery.noConflict();</script>

<script type='text/javascript' src='https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/zepto/zepto/zepto.min.js' charset='utf-8'></script>
<script type='text/javascript' src='https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/js/js/sm.min.js' charset='utf-8'></script>
<!-- <script type='text/javascript' src='https://gitee.com/huaflower/CommonFile/raw/master/js/sm-extend.min.js' charset='utf-8'></script> -->
<script src="https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/js/js/swiper/swiper.min.js"></script>
<script type="text/javascript">
   
      var gradearr = new Array();
      var gradenames = new Array();
      var classnames = new Array();
      var classarr = new Array();

      // 加载flag
      var loading = false;
      var offset = 0
      var limit = 18

      var lastlength = 18;
      var schoollist = new Array();
      var schoolid = -1;
      var classid = -1;
      var gradeid = -1;

      // 注册'infinite'事件处理函数
      $(document).on('infinite', '.infinite-scroll-bottom',function() {
        console.log(loading);
          // 如果正在加载，则退出
          if (loading) return;

          // 设置flag
          loading = true;

          // 模拟1s的加载过程
          setTimeout(function() {

            console.log("count:"+schoollist.length+"lastlength:"+lastlength+"=====limit"+limit);
              
              console.log('================'+lastlength + '====' + limit);


              if (lastlength < limit) {

                  // 加载完毕，则注销无限加载事件，以防不必要的加载
                  $.detachInfiniteScroll($('.infinite-scroll'));
                  // 删除加载提示符
                  $$('.infinite-scroll-preloader').remove();
                  return;
              }
               offset = schoollist.length;
               schools();
              // 添加新条目
              // addItems(itemsPerLoad, lastIndex);
              // 更新最后加载的序号
              //容器发生改变,如果是js滚动，需要刷新滚动
              $.refreshScroller();
          }, 1000);
      });

   // 输入学校接口
   function schools(){

      var param = {
      }
      var seartext = $$("#search").val();
      var url = 'api/v1/schools?offset='+ offset+'&limit='+limit;
      if(isNotNull(seartext)){
        url = 'api/v1/schools?search=name:'+seartext+'&searchFields=name:like&offset='+offset+'&limit='+limit;
      }else{
        url = 'api/v1/schools?offset='+offset+'&limit='+limit;
      }
      net_request('get',url,param,schoolSuccessCallBack,errorCallBack);
   }
 
   function schoolSuccessCallBack(data){
    grades();//获取年级数据
        if (isNotNull(data)) {
          var databody = data.data;
          if (offset == 0) {
             schoollist = new Array();
          }
            if (isNotNull(databody)) {
                var list = databody.list;
                lastlength = list.length;

                  for (var i = 0; i < list.length; i++) {
                    var item = list[i];
                    schoollist.push(item);
                  }

                  if (isNotNull(schoollist) && schoollist.length > 0) {
                    var html = '';
                    for (var i = 0; i < schoollist.length; i++) {
                          var item = schoollist[i];
         
                          if (isNotNull(item)) {
                            html += '<li sindex="'+i+'" onclick="schoolitemclick(this)" class="schoolclass">'+item.name+'</li>';
                          }           
                    }
                   
                   $$('#li_block').html(html);

                  }else{//数据都为空，清空
                    $$('#li_block').html('');                  
                  }
               
            }
      }
      // 重置加载flag
      loading = false;


      // 加载完毕，则注销无限加载事件，以防不必要的加载
      // $.detachInfiniteScroll($$('.infinite-scroll'));
       
   }

 // 年级接口
 function grades(){
    var param = {}
    var url = 'api/v1/grades';
    net_request('get',url,param,gradeSuccessCallBack,errorCallBack);
 }
 
 function gradeSuccessCallBack(data){
       if (isNotNull(data) && data.success) {
         var databody = data.data;

         if (isNotNull(databody)) {
          var html = '';

          for (var i = 0; i < databody.length; i++) {
             var item = databody[i];
             if (isNotNull(item)) {
                gradearr.push(item);
                gradenames.push(item.name);
              
             }
            }
          }
      }

      if(schoolid != -1 && gradeid != -1){//必须要选择学校跟年纪
              //获取班级接口
              classes();
      }
 }

 // 班级接口
 function classes(){
  var param = {}
  var url = 'api/v1/school_classes?search=grade_id:'+gradeid+';school_id:'+schoolid+'&searchJoin=and';
  net_request('get',url,param,classesSuccessCallBack,errorCallBack);
 }

 function classesSuccessCallBack(data){
  if (isNotNull(data) && data.success) {
         var databody = data.data;

         if (isNotNull(databody)) {
          var html = '';

          for (var i = 0; i < databody.length; i++) {
             var item = databody[i];
             if (isNotNull(item)) {
                classarr.push(item);
                classnames.push(item.name);
              
             }
            }
          }
      }
 }






 function initdata(){
  // 点击搜索学校

  $$("#search").bind("input propertychange",function(event){
       
          offset = 0;
          //获取学校数据
          schools();
  });
 }

 function schoolitemclick(cthis){
   var cindex = Number($$(cthis).attr("sindex"));
   schoolid = schoollist[cindex].id;


          var curname = $$("#gradeipt").val();
          if(isNotNull(curname)){
            for(var i = 0;i<gradearr.length;i++){
              if(curname == gradearr[i].name){
                  gradeid = gradearr[i].id;
                  break;
              }
            }


          
            if(schoolid != -1 && gradeid != -1){//必须要选择学校跟年纪
              //获取班级接口
              classes();
            }
          }
    
    $$('#showschool').hide();
    $$('#school-title').val(schoollist[cindex].name);

 }

 function schoolclick(){
native_goto('local/updatestuinfo');
 }

 function gradeclick(){
native_goto('local/updatestuinfo');
 }

 function classclick(){
  native_goto('local/updatestuinfo');
 }

  
   // 点击返回
   function backclick(){
     native_goto('local/finish');
   }

   // 点击修改姓名
   function modify_names(){
     native_goto('local/modify_names');
   }

   // 点击修改学号
   function student_id(){
     native_goto('local/student_id');
   }

   // 修改手机号
   function newphone(){
    native_goto('local/newphone');
   }

   // 修改密码
   function change_password(){
    native_goto('local/change_password');
   }

   // 点击退出登录
   function clklogout(){
    logout();
   }

   // 退出登录接口
   function logout(){
      var param = {}
      var url = 'apis/logout';
      net_request('get',url,param,logoutSuccessCallBack,errorCallBack);
   }

   // 小孩信息接口
   function userinfo(){
      var param = {}
      var url = 'apis/userinfo';
      net_request('get',url,param,userinfoSuccessCallBack,errorCallBack);
   }
   // 回调成功函数 退出登录
   function logoutSuccessCallBack(data){
     if (isNotNull(data) && data.success) {
      native_goto('local/loginmine');
     }
   }

   // 成功函数回调 小孩
   function userinfoSuccessCallBack(data){
    schools();//获取学校数据
      if (isNotNull(data) && data.success) {
         var item = data.data;
         // alert(item);
         // alert(JSON.stringify(item));
         var html = '';
         if (isNotNull(item)) {

           var schoolname = "";
           var gradename = "";
           var classname = "";

           if(isNotNull(item.school)){
              schoolname = item.school.name;
           }
           if(isNotNull(item.grade)){
              gradename = item.grade.name;
           }
           if(isNotNull(item.school_class)){
              classname = item.school_class.name;
           }
                     
              html = `
                   <li>
                      <div class="item-content">  
                         <div class="item-inner" onclick="modify_names()">
                              <span class="item-msg">姓名</span>
                              <div class="item-title">${item.name}</div>
                              <div class="item-icon">
                                 <img src="https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/img/img/img_more_right.png">
                              </div>
                         </div>
                      </div>
                    </li>
                    <li>
                      <div class="item-content">  
                         <div class="item-inner" id="regschool" onclick="schoolclick()">
                              <span class="item-msg" id="school-msg">学校</span>
                              <div class="item-title" id="school-title">${schoolname}</div>
                              <div class="item-icon">
                                 <img src="https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/img/img/img_more_right.png">
                              </div>
                         </div>
                      </div>
                    </li>
                    <li>
                      <div class="item-content">  
                         <div class="item-inner" id="gradeipt" onclick="gradeclick()">
                              <span class="item-msg">年级</span>
                              <div class="item-title">${gradename}</div>
                              <div class="item-icon">
                                 <img src="https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/img/img/img_more_right.png">
                              </div>
                         </div>
                      </div>
                    </li>
                    <li>
                      <div class="item-content">  
                         <div class="item-inner" id="classipt" onclick="classclick()">
                              <span class="item-msg">班级</span>
                              <div class="item-title">${classname}</div>
                              <div class="item-icon">
                                 <img src="https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/img/img/img_more_right.png">
                              </div>
                         </div>
                      </div>
                    </li>
                    <li>
                      <div class="item-content">  
                         <div class="item-inner" onclick="student_id()">
                              <span class="item-msg">学号</span>
                              <div class="item-title">${item.student_no}</div>
                              <div class="item-icon">
                                 <img src="https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/img/img/img_more_right.png">
                              </div>
                         </div>
                      </div>
                    </li>
                    <li>
                      <div class="item-content">  
                         <div class="item-inner" onclick="newphone()">
                              <span class="item-msg">修改手机号</span>
                              <div class="item-title">${item.mobile}</div>
                              <div class="item-icon">
                                 <img src="https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/img/img/img_more_right.png">
                              </div>
                         </div>
                      </div>
                    </li>
                    <li>
                      <div class="item-content">  
                         <div class="item-inner" onclick="change_password()">
                              <span class="item-msg">修改密码</span>
                              <div class="item-title"></div>
                              <div class="item-icon">
                                 <img src="https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/img/img/img_more_right.png">
                              </div>
                         </div>
                      </div>
                    </li>`;
  
         }
          $$('#childdesc').html(html);
      }
   }

   function errorCallBack(data){
    console.log(JSON.stringify(data));
   }


  function getParams(data){
   // data需要转成json调用 ，函数urlParamParseJson();
     /*var jodata = JSON.parse(data); 
     if(isNotNull(jodata)){//
        
     }*/

  }

  //刷新数据
  function refreshData(){
    userinfo();
  }
    // 初始化
    $(function(){
      userinfo();

       initdata();
      $.init();
    });
  </script>
</body>
</html>